<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
  >
    <path
      d="M14.5 14C14.63 14 14.76 13.95 14.85 13.85C14.95 13.76 15 13.63 15 13.5C15 13.37 14.95 13.24 14.85 13.15C14.76 13.05 14.63 13 14.5 13C14.37 13 14.24 13.05 14.15 13.15C14.05 13.24 14 13.37 14 13.5C14 13.63 14.05 13.76 14.15 13.85C14.24 13.95 14.37 14 14.5 14Z"
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
    ></path>
    <path
      d="M8.5 19L12 21L15.5 19L19 21L19 4.99998C19 4.47006 18.79 3.95994 18.41 3.59004C18.04 3.21006 17.53 3 17 3L7.00004 3C6.47 3 5.95998 3.21006 5.58996 3.59004C5.21 3.95994 5 4.47006 5 4.99998L5 21L8.5 19Z"
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
      stroke-linecap="round"
    ></path>
    <path
      d="M9 8.5C9 8.63 9.05 8.76 9.15 8.85C9.24 8.95 9.37 9 9.5 9C9.63 9 9.76 8.95 9.85 8.85C9.95 8.76 10 8.63 10 8.5C10 8.37 9.95 8.24 9.85 8.15C9.76 8.05 9.63 8 9.5 8C9.37 8 9.24 8.05 9.15 8.15C9.05 8.24 9 8.37 9 8.5Z"
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
      d="M14.5 14L14.51 14"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
      d="M9.5 9L9.51001 9"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
      stroke-linecap="round"
      d="M9 8L15 14"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
      d="M14.5 14L14.51 14"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
      stroke-linecap="round"
      d="M9 8L15 14"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
      d="M9.5 9L9.51001 9"
    ></path>
  </svg>
</template>

<script>
  import config from './config' // 导入配置文件
  const { transionDuration, activeColor, inactiveColor } = config

  export default {
    name: 'operation-data-svg',
    props: {
      active: { default: false },
      transiton: {
        type: Number,
        default: transionDuration,
      },

      activeColor: {
        type: String,
        default: activeColor,
      },
      inactiveColor: {
        type: String,
        default: inactiveColor,
      },
    },
    computed: {
      style() {
        return { transition: `stroke ${this.transiton}s ease` }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
